<script setup>
import {ref} from "vue";
import { View, Edit, Delete } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter()
const toFlyRecord = () => {
  router.push({
    path: '/flyRecord'
  })
}
const toRouter = (path) => {
  router.push({
    path
  })
}
const countList = ref([
  {
    name: '无人机数量',
    count: 0,
    src:  require('@/assets/home_bg_icon1.png')
  },
  {
    name: '机场数量',
    count: 0,
    src:  require('@/assets/home_bg_icon2.png')

  },
  {
    name: '工单数量',
    count: 0,
    src:  require('@/assets/home_bg_icon3.png')

  },
  {
    name: '总执飞次数 ',
    count: 0,
    src:  require('@/assets/home_bg_icon4.png')

  },
  {
    name: '任务数量',
    count: 0,
    src:  require('@/assets/home_bg_icon5.png')

  },
  {
    name: '预警数量',
    count: 0,
    type: 'error',
    src:  require('@/assets/home_bg_icon6.png')

  }
])
const workList = ref([
  {
    name: '无人机项目',
    src:  require('@/assets/menu1.png'),
    path: '/uavProject/list'
  },
  {
    name: '机场项目',
    src:  require('@/assets/menu2.png'),
    path: '/airportProject/list'
  },
  {
    name: '新增航线',
    src:  require('@/assets/menu3.png'),
    path: '/airportProject/line'
  },
  {
    name: '飞控大屏 ',
    src:  require('@/assets/menu4.png'),
    path: '/monitor/fly'
  },
])
// 无人机
const deviceList = ref([
  {
    id: 1,
    name: '无人机1',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 2,
    name: '无人机2',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'error'
  },
  {
    id: 3,
    name: '无人机3',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 4,
    name: '无人机4',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 5,
    name: '无人机5',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 6,
    name: '无人机6',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 7,
    name: '无人机7',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 8,
    name: '无人机8',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 9,
    name: '无人机9',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 10,
    name: '无人机10',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
])
// 机场
const airList = ref([
  {
    id: 1,
    name: '机场1',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 2,
    name: '机场2',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'error'
  },
  {
    id: 3,
    name: '机场3',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 4,
    name: '机场4',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 5,
    name: '机场5',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 6,
    name: '机场6',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 7,
    name: '机场7',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00',
    status: 'normal'
  },
  {
    id: 8,
    name: '机场8',
    num: '7CTDM3F00B9J44',
    createTime: '2021-08-01 12:00:00' ,
    status: 'normal'
  },
])
const taskDate = ref([new Date(), new Date()])
const taskOption = ref({
  grid: {
    top: 70,
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    backgroundColor: 'rgba(28, 36, 53, .8)',
    textStyle: {
      color: '#FFFFFF',
      fontSize: 12
    },
    formatter: '{b} : {c} 次'
  },
  xAxis: {
    type: 'category',
    data: ['08.31', '09.01', '09.02', '09.03', '09.04', '09.05', '09.06', '09.07', '09.08', '09.09'],
    lineStyle: {
      color: '#DDE0E5'
    },
    axisLabel: {
      color: '#B2B8C2',
      fontSize: 12
    },
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#DDE0E5'
      }
    }
  },
  yAxis: {
    name: '次数',
    nameTextStyle: {
      color: '#B2B8C2',
      fontSize: 12,
    },
    nameLocation: 'end',
    type: 'value',
    lineStyle: {
      color: '#DDE0E5'
    },
    axisLabel: {
      color: '#B2B8C2',
      fontSize: 12
    },
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#DDE0E5'
      }
    }
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130,80, 70, 110,],
      type: 'bar',
      barWidth: 16,
      showBackground: true,
      itemStyle: {
        color: '#5187F3'
      },
      backgroundStyle: {
        color: '#DCE7FD'
      }
    }
  ]
})
// 飞行记录
const recordList = ref([
  {
    name: '项目1',
    model: '无人机1',
    line: '航线1',
    metric: '飞行策略1',
    location: '站点1',
    status: '已完成',
    startTime: '2021-08-01 12:00:00',
    endTime: '2021-08-01 12:00:00'
  },
  {
    name: '项目2',
    model: '无人机2',
    line: '航线2',
    metric: '飞行策略2',
    location: '站点2',
    status: '已完成',
    startTime: '2021-08-01 12:00:00',
    endTime: '2021-08-01 12:00:00'
  },
  {
    name: '项目3',
    model: '无人机3',
    line: '航线3',
    metric: '飞行策略3',
    location: '站点3',
    status: '已完成',
    startTime: '2021-08-01 12:00:00',
    endTime: '2021-08-01 12:00:00'
  },
  {
    name: '项目4',
    model: '无人机4',
    line: '航线4',
    metric: '飞行策略4',
    location: '站点4',
    status: '已完成',
    startTime: '2021-08-01 12:00:00',
    endTime: '2021-08-01 12:00:00'
  },
  {
    name: '项目5',
    model: '无人机5',
    line: '航线5',
    metric: '飞行策略5',
    location: '站点5',
    status: '已完成',
    startTime: '2021-08-01 12:00:00',
    endTime: '2021-08-01 12:00:00'
  },
])
</script>

<template>
  <div class="home">
    <el-row :gutter="16" class="count-row">
      <el-col :span="4" v-for="item in countList">
        <div class="card count-box f-c j-c">
          <div :class="['count', item.type ]">
            <el-statistic :value="item.value" />
          </div>
          <div class="name">{{ item.name }}</div>
          <img :src="item.src" alt="">
        </div>
      </el-col>
    </el-row>
    <div class="gap"></div>
    <el-row :gutter="16">
      <el-col :span="16">
        <div class="card">
          <div class="card-header">
            <div class="title">常用功能</div>
          </div>
          <el-row :gutter="16">
            <el-col :span="6" v-for="item in workList" @click="toRouter(item.path)">
              <div class="work-item f-c j-c a-c">
                <img :src="item.src" alt="">
                <div class="name">{{ item.name }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="gap"></div>
        <div class="card" style="height: 369px">
          <div class="card-header">
            <div class="title">任务统计</div>
            <div>
              <el-date-picker type="daterange" v-model="taskDate"></el-date-picker>
            </div>
          </div>
          <div class="f-g">
            <v-chart class="chart" :option="taskOption" style="width: 100%;height: 100%" autoresize/>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card" style="height: 261px">
          <div class="card-header">
            <div class="title">最近使用无人机</div>
            <div class="more">查看更多 ></div>
          </div>
          <div class="device-list">
            <el-scrollbar>
              <div class="device-item f-r a-c" v-for="item in airList" :key="item.id">
                <div class="device-info">
                  <div :class="['device-name f-r a-c', item.status]">{{ item.name }}</div>
                  <div class="device-num">{{ item.num }}</div>
                </div>
                <div class="create-time">{{ item.createTime }}</div>
                <div class="handle f-r a-c j-e">
                  <el-icon color="#006FE9"><View /></el-icon>
                  <el-icon color="#006FE9" style="margin: 0 8px"><Edit /></el-icon>
                  <el-icon color="#FF5C5C"><Delete /></el-icon>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="gap"></div>
        <div class="card" style="height: 261px">
          <div class="card-header">
            <div class="title">最近使用机场</div>
            <div class="more">查看更多 ></div>
          </div>
          <div class="device-list">
            <el-scrollbar>
            <div class="device-item f-r a-c" v-for="item in deviceList" :key="item.id">
              <div class="device-info">
                <div :class="['device-name f-r a-c', item.status]">{{ item.name }}</div>
                <div class="device-num">{{ item.num }}</div>
              </div>
              <div class="create-time">{{ item.createTime }}</div>
              <div class="handle f-r a-c j-e">
                <el-icon color="#006FE9"><View /></el-icon>
                <el-icon color="#006FE9" style="margin: 0 8px"><Edit /></el-icon>
                <el-icon color="#FF5C5C"><Delete /></el-icon>
              </div>
            </div>
            </el-scrollbar>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="gap"></div>
    <div class="card">
      <div class="card-header" style="margin-bottom: 24px;">
        <div class="title">飞行记录</div>
        <div class="more" @click="toFlyRecord">查看详情 ></div>
      </div>
      <el-table :data="recordList" height="280px" size="large">
        <el-table-column label="项目名称" prop="name"></el-table-column>
        <el-table-column label="无人机机型" prop="model"></el-table-column>
        <el-table-column label="航线名称" prop="line"></el-table-column>
        <el-table-column label="飞行策略" prop="metric"></el-table-column>
        <el-table-column label="站点" prop="location"></el-table-column>
        <el-table-column label="任务状态" prop="status"></el-table-column>
        <el-table-column label="开始时间" prop="startTime"></el-table-column>
        <el-table-column label="结束时间" prop="endTime"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss">
.home {
  overflow: auto;
  flex-grow: 1;
  padding: 16px;
  .el-table {
    color: #898F9D;
    thead {
      color: #1C2435;
    }
  }
  .gap {
    height: 16px;
  }
  .card {
    padding: 12px 12px;
    border-radius: 4px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .card-header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 20px;
      .title {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 500;
        line-height: 19.6px;
        text-align: left;
        color: #1C2435;
      }
      .more {
        cursor: pointer;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        text-align: left;
        color: #898F9D;
      }
    }
  }
  .device-list {
    flex-grow: 1;
    overflow: auto;
    margin-top: 16px;
    .device-item {
      height: 52px;
      margin-top: 16px;
      padding: 4px 8px;
      background-color: #F7F8FB;
      //第一个不需要margin-top
      &:first-child {
        margin-top: 0;
      }
      .device-info {
        flex: 3;
        .device-name {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 19.6px;
          text-align: left;
          margin-bottom: 4px;
          height: 20px;
          // 溢出省略号
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 4px;
          }
          &.error::before {
            background-color: #FF4D4F;
          }
          &.normal::before {
            background-color: #48E07C
          }
        }
        .device-num {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 19.6px;
          text-align: left;
          color: #898F9D;
          // 溢出省略号
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .create-time {
        flex: 2;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        text-align: left;
        color: #898F9D;
      }
      .handle {
        flex: 2;
        cursor: pointer;
        .el-icon {
          cursor: pointer;
        }
      }
    }
  }
  .count-box {
    height: 110px;
    position: relative;

    .el-statistic__number {
      font-family: DIN;
      font-size: 24px;
      font-weight: 700;
      line-height: 29.3px;
      text-align: left;
      color: #1C2435;
    }
    .error {
      .el-statistic__number {
        color: #FF4D4F;
      }
    }
    .name {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 19.6px;
      text-align: left;
      color: #898F9D;
      margin-top: 16px;
    }
  }
  .count-row {
    img {
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .el-col:nth-of-type(1) img{
      width: 76px;
      height: 76px;
    }
    .el-col:nth-of-type(2) img{
      width: 133px;
      height: 83px;
      opacity: 0.2;
    }
    .el-col:nth-child(3) img{
      width: 81px;
      height: 81px;
      opacity: 0.1;
    }
    .el-col:nth-child(4) img{
      width: 100px;
      height: 100px;
    }
    .el-col:nth-child(5) img{
      width: 80px;
      height: 76px;
    }
    .el-col:nth-child(6) img{
      width: 100px;
      height: 76px;
    }
  }

  .work-item {
    height: 110px;
    cursor: pointer;
    img {
      width: 50px;
      height: 50px;
    }
    .name {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 19.6px;
      text-align: left;
      color: #898F9D;
      margin-top: 10px;
    }
  }
}
</style>